<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Home</title>
<link href="../../static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../static/css/iotxstyle.css" rel="stylesheet" type="text/css" media="all" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="../../static/js/jquery-2.0.3.min.js"></script>
<script src="../../static/js/responsiveslides.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="../../static/js/move-top.js"></script>
<script type="text/javascript" src="../../static/js/easing.js"></script>
<script src="../../static/js/bootstrap.js"></script>
<script src="../../static/js/jquery.progress.js"></script>
<style>
	.nav > li {
		position: relative;
		display: block;
		margin-left: 1%;
		border: 0px;
	}
	.form-control{
		background:#FFFF;margin-top:-1%;float: inherit;margin-left:30%;width: 35%;height: 100%;font-size: 18px;
		border: solid 0px red;
	}
</style>
</head>
<body>
<!--navbar -->
	<div class="all-navbar" style="height:500px;padding-top:2%;background-image: url('../../static/img/index-top-img.png')"> <!--style="height:380px;background-image: url('img/topo-guide.png')"-->
	   <nav class="navbar navbar-default">
		   			<div style="float: left;padding-left: 2%">
				   		<img src="../../static/img/logo-w.png" style="width: 260px;height: 100%">
		   			</div>
				      <ul class="nav navbar-nav" style="float: left;width: 80%">
					   <li class="active">
						   <a href="#" >System <span class="sr-only"></span></a>
					   </li>
					   <li><a href="#" id="network">Network</a></li>
					   <li><a href="#" id="sensors">Sensors</a></li>
					   <li class="dropdown">
						   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Files<span class="caret"></span>
						   </a>
						   <ul class="dropdown-menu">
							   <li><a href="#" id="datafile">Data  File</a></li>
							   <li><a href="#" id="settingfile">Setting  File</a></li>
						   </ul>
					   </li>
					   <li class="dropdown">
						   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tools<span class="caret"></span>
						   </a>
						   <ul class="dropdown-menu">
							   <li><a href="#" id="datarecovery">Data  Recovery</a></li>
							   <li><a href="#" id="settingguide">Setup Wizard</a></li>
						   </ul>
					   </li>
					   <li><a href="#" id="logout">Logout</a></li>
					   <li>
						   <button class="apply-button" style="margin-left: 40%">
							   Apply&Save
						   </button>
					   </li>
					   <li>
						   <button class="apply-button">
							   Upload
						   </button>
					   </li>
				   </ul>
	   </nav>
		<div class="index-introduction-title">
			IOTX-Master  System
		</div>
		<div class="index-introduction-info">
		</div>
	</div>
<!--navbar -->
	<section id="connectPage">
		<div class="top-second">

			<div class="user-information" id="user-information">
				User  Information
			</div>
			<div class="system-information" id="system-information">
				System
			</div>
			<div class="system-info-line">
				<div class="system-info-line1">

				</div>
				<div class="system-info-line2">

				</div>
			</div>

		</div>
		<div class="systemInfo">
		<div class="systemInfo-in">

			<div class="system-title">
				> System Settings
			</div>
			<div class="user-title">
				<div class="user-title-info">
				User Information
				</div>
			</div>
			<div class="user-info" style="margin-top: 1%">
				<div class="system-info-title">
				Company
				</div>
				<input class="form-control"  value="{{ data['user']['company_name'] }}"  placeholder="Please enter" >
			</div>
			<div class="user-info">
				<div class="system-info-title">
				Address
				</div>
				<input class="form-control"   value="{{ data['user']['company_address'] }}"  	placeholder="Please enter" >
			</div>
			<div class="user-info">
				<div class="system-info-title">
				User Name
				</div>
				<input class="form-control"  value="{{ data['user']['user_name'] }}"    placeholder="Please enter" >
			</div>
			<div class="user-info">
				<div class="system-info-title">
				Equipment ID
				</div>
				<input class="form-control"    value="{{ data['user']['device_id'] }}"  placeholder="Please enter" >
			</div>
			<div class="user-info">
				<div class="system-info-title">
				Equipment Name
				</div>
				<input class="form-control"  value="{{ data['user']['device_no'] }}"    placeholder="Please enter" >
			</div>
			<div class="user-title" style="margin-top: 5%">
				<div class="user-title-info">
					System
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				Serial Number
				</div>
				<div class="system-right">
					{{ data['sys']['unique_id'] }}
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				CPU
				</div>
				<div class="system-right">
					{{ data['sys']['cpu'] }}
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				Memory
				</div>
				<div class="system-right">
					<svg id="container1"></svg>
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				HD
				</div>
				<div class="system-right">
					<svg id="container2"></svg>
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				Power
				</div>
				<div class="system-right">
					{{ data['sys']['power'] }}
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				GPS
				</div>
				<div class="system-right">
					{{ data['sys']['gps'] }}
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				Uptime
				</div>
				<div class="system-right">
					{{ data['sys']['upTime'] }}
				</div>
			</div>
			<div class="user-info">
				<div class="system-info-title">
				DB9
				</div>
				<div class="system-right">
					DB9
				</div>
			</div>
			<div class="Uplink-Status">
				<div class="system-info-title">
				Uplink Status
				</div>
				<div class="status-all">
					<div class="status-left">
						<div class="status-left-img">
							<img src="../../static/img/smallwifi.png"style="background: #F8F8F7" >
						</div>
						<div class="status-left-img">
							10%
						</div>
					</div>
					<div class="status-right">
						<div class="status-detail">
							<div class="status-detail-title1">
								SSID:
							</div>
							<div class="status-detail-info1" style="padding-left: 23%">
								WRTnose2R_2C8C
							</div>
						</div>
						<div class="status-detail">
							<div class="status-detail-title2">
								Mode:
							</div>
							<div class="status-detail-info2" style="padding-left: 15%">
								Master
							</div>
						</div>
						<div class="status-detail">
							<div class="status-detail-title3">
								Channel:
							</div>
							<div class="status-detail-info3" style="width:120%;padding-left: 36%">
								6(0.00 GHZ)
							</div>
						</div>
						<div class="status-detail">
							<div class="status-detail-title4">
								Bitrate:
							</div>
							<div class="status-detail-info4" style="padding-left: 29%">
								72M bit/s
							</div>
						</div>
						<div class="status-detail">
							<div class="status-detail-title5">
								BSSID:
							</div>
							<div class="status-detail-info5" style="padding-left: 15%">
								64:51:7E:80:90:8C
							</div>
						</div>
						<div class="status-detail">
							<div class="status-detail-title6">
								Encyption:
							</div>
							<div class="status-detail-info6">
							</div>
						</div>
					</div>
			</div>
		</div>
			</div>
		</div>
		<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 0;"></span> <span id="toTopHover" style="opacity: 1;"> </span></a>
        <input type="hidden" id="memory_total" value="{{ data['sys']['memory_total'] }}" />
        <input type="hidden"  id="memory_used"  value="{{ data['sys']['memory_used'] }}"/>
        <input type="hidden" id="storage_total" value="{{ data['sys']['hd_total'] }}" />
        <input type="hidden" id="storage_used"  value="{{ data['sys']['hd_used'] }}"/>
	</section>





<script type="text/javascript">
    var memory_total = $("#memory_total").val();
    var memory_used = $("#memory_used").val();
    var storage_total = $("#storage_total").val();
    var storage_used = $("#storage_used").val();
    var memory_per = Math.round(parseFloat(memory_used)/parseFloat(memory_total)*100);
    var storage_per = Math.round(parseFloat(storage_used)/parseFloat(storage_total)*100);

    var memory_text = memory_used+"kb/"+memory_total+"kb("+memory_per+"%)";
    var storage_text = storage_used+"kb/"+storage_total+"kb("+storage_per+"%)";

    var progress1 = $("#container1").Progress({
        percent: 0,
        width: 300,
        height: 30,
        barColor:'#46CFB0',
        fontSize: 16,
        increaseSpeed: 8,
        emptyText:memory_text
    });
    var progress2 = $("#container2").Progress({
        percent: 0,
        width: 300,
        height: 30,
        barColor:'#46CFB0',
        fontSize: 16,
        increaseSpeed: 8,
        emptyText:storage_text
    });
    setTimeout(function(){
        progress1.percent(memory_per);
    }, 800);
    setTimeout(function(){
        progress2.percent(storage_per);
    }, 800);


    $(document).ready(function(){

        $("#container1").find("text").text(12);
        $("#container2").find("text").text(456);

        $('#network').click(function(){
            window.location.href='html/network/network.html';
        });
        $('#sensors').click(function(){
            window.location.href='html/sensors/sensors.html';
        });
        $('#datafile').click(function(){
            window.location.href='html/data/datafile.html';
        });
        $('#settingfile').click(function(){
            window.location.href='html/data/settingfile.html';
        });
        $('#datarecovery').click(function(){
            window.location.href='html/data/datarecovery.html';
        });
        $('#settingguide').click(function(){
            window.location.href='html/guide/guide.html';
        });
        $('#logout').click(function(){
            window.location.href='login.html';
        });
		$('#user-information').click(function () {
            $('#system-information').css('color','inherit');
            $('.system-info-line2').css('background','none');
            $(this).css('color','#2DA2EA');
            $('.system-info-line1').css('background','#2DA2EA');
            var t = $(window).scrollTop();
            $('body,html').animate({'scrollTop':t-800},100)
        });
        $('#system-information').click(function () {
            $('#user-information').css('color','inherit');
            $('.system-info-line1').css('background','none');
            $(this).css('color','#2DA2EA');
            $('.system-info-line2').css('background','#2DA2EA');
            var t = $(window).scrollTop();
            $('body,html').animate({'scrollTop':t+800},100)
        });
        var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
        };


        $().UItoTop({ easingType: 'easeOutQuart' });
    });
</script>
</body>
</html>